<template>
  <div
    class="user-tab-list-area"
    :class="[center ? 'flx-row-c-c' : 'flx-row-s-c']"
  >
    <template v-if="!normal">
      <template v-if="list.length == 1">
        <div @click="toBack" v-if="isGoBack && !returnButton" class="return-button">
          <img
              class="cart-img"
              :src="require('_a/images/return@2x.png')"
              alt=""
          />
        </div>
        <router-link :to="backUrl" v-if="!isGoBack && returnButton" class="return-button">
          <img
            class="cart-img"
            :src="require('_a/images/return@2x.png')"
            alt=""
          />
        </router-link>
        <div
          class="f-16 f-w-600 c-black"
          v-for="(item, index) in list"
          :key="index"
        >
          {{ item.name }}
        </div>
      </template>
      <template v-else>
        <template v-for="(item, index) in list">
          <div v-if="active == index" class="item active-item" :key="index">
            {{ item.name }}
          </div>
          <template v-else>
            <a
              v-if="item.other"
              :href="item.to"
              class="item normal-item"
              :key="index"
              >{{ item.name }}</a
            >
            <div
              v-else
              class="item normal-item"
              :key="index"
              @click="toPage(item.to)"
            >
              {{ item.name }}
            </div>
          </template>
        </template>
      </template>
    </template>
    <template v-else>
      <div
        v-for="(item, index) in list"
        class="item"
        style="cursor: pointer"
        :class="[normalActive == index ? 'active-item' : 'normal-item']"
        :key="index"
        @click="clickItem(index)"
      >
        {{ item.name }}
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "VipUsertablist",
  props: {
    list: {
      default: () => [],
    },
    returnButton: {
      default: false,
    },
    isGoBack: {
      default: false,
    },
    backUrl: {
      default: "",
    },
    normal: {
      default: false,
    },
    center: {
      default: false,
    },
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.active = newValue.meta.tabIndex;
      },
    },
  },
  data() {
    return {
      active: null,
      normalActive: 0,
    };
  },
  mounted() {},
  methods: {
    clickItem(index) {
      this.normalActive = index;
      this.$emit("click-tab", index);
    },
    toBack() {
      console.log(1123)
      this.$router.go(-1)
    },
    toPage(to) {
      if (to == this.$route.path) {
        this.$router.go(0);
      } else {
        this.$router.push(to);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user-tab-list-area {
  height: 36px;
  border-bottom: 1px solid #e4e6fa;
  background-color: #fff;
  position: relative;
  .item {
    display: inline-block;
    margin: 0 14px;
    padding: 0 12px;
    font-size: 15px;
    line-height: 22px;
    color: #000;
    padding-bottom: 12px;
    border-bottom: transparent 2px solid;
    transition: border-color 0.3s, color 0.3s;
  }
  &:hover {
    cursor: pointer;
  }
  .normal-item {
    color: #000;

    &:hover {
      color: $mainColor;
      cursor: pointer;
      font-weight: 600;
    }
  }
  .active-item {
    color: $mainColor;
    border-color: $mainColor;
    font-weight: 600;
  }
  .return-button {
    margin-right: 10px;
    cursor: pointer;
  }
  .cart-img {
    @include size(21px);
  }
}
</style>
